<template>
  <div class="mainmap">
    <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
      @ready="handler"
      :scroll-wheel-zoom="true"
      :mapStyle="bmapStyle"
    >
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT" :offset="{width: 500, height: 0}"></bm-map-type>
      <!-- <bm-geolocation anchor="BMAP_ANCHOR_TOP_LEFT" :showAddressBar="true" :autoLocation="true" :offset="{width: 700, height: 0}"></bm-geolocation> -->
      <bml-marker-clusterer :averageCenter="true">
        <bm-marker
          v-for="(marker,index) of markers"
          :key="index"
          :label="getLabel(marker)"
          @click="clickmark(marker)"
          :position="{lng: marker.ly, lat: marker.lx}"
        ></bm-marker>
      </bml-marker-clusterer>
      <!-- <bm-boundary name="三门峡市" :strokeWeight="2" strokeColor="#aaa" fillColor=""  ></bm-boundary> -->
      <!-- <bm-boundary name="南阳市" :strokeWeight="2" strokeColor="#aaa" fillColor=""  ></bm-boundary> -->
      <!-- <bm-boundary name="河南省" strokeColor="#aaa"></bm-boundary> -->
      <bm-boundary v-for="item in allprovence" v-if="item != '河南省'" :name="item" :strokeWeight="0.1" fillColor="#000" :fillOpacity="0.1"></bm-boundary>
      <bm-view class="bmapview"></bm-view>
    </baidu-map>
  </div>
</template>
<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'

import defaultStyle from "./json/defaultstyle.json";
import blackStyle from "./json/black.json";
import positon from "./json/position.js";

import allprovence from './json/allprovence.js'

export default {
  components: {
    BmlMarkerClusterer
  },

  data() {
    
    return {
      emp: {
        address__province: "", //县
        address__city: "", //镇/街道
        address__dist: "" //村/社区
      },
      center: { lng: 113.229691, lat: 34.178984 }, //地区中心点113.529691,34.178984
      zoom: 8, //缩放等级
      infowindow: {
        lng: "",
        lat: "",
        tid: "",
        content: "",
        ctime: "",
        show: false
      }, //标注弹窗数据
      bmapStyle: {
        styleJson: blackStyle //地图个性样式
      },
      markers: positon.list, //标注json数组
      allprovence: allprovence
    };
  },

  watch:{

  },

  mounted() {},

  methods: {

    syncCenterAndZoom(e){
      this.zoom = e.target.getZoom()
      
    },

    getLabel(marker){
      let res = 
      {
        content: marker.name,
        opts: {
          offset: {
            width: 25,
            height: 0
          },
          position: {
            lng: marker.ly,
            lat: marker.lx
          },
          enableMassClear: false
        }
      }
      return res
    },

    handler() {
    },
    clickmark(marker){
      alert(JSON.stringify(marker))
    }
  }
};
</script>
<style lang="scss">

.anchorBL {
  display: none;
}

.bm-view {
  position: absolute;
  width: 97%;
  height: calc(100% - 95px);
  // margin-left: 5px;
  // border: 5px solid;
  // box-shadow: inset 0px 0px 50px #fff;
  box-shadow:  0 0 5rem rgb(0,110,150)
}
.mainmap {
  // padding: 50px;
  // width: 100%;
  // height: 100%;
}
.bmapview{
  width: 100%;
  height: 100%;
}
.BMapLabel{
  background-color: #55555500 ! important;
  color: white;
  border: 0px !important;
}
</style>
